<template>
  <div class="out abs zIndex">
    <div class="search flex flex-between">
      <div class="left flex" @click="onCityClick">
        <p class="marginAuto0">{{ city }}</p>
        <img class="marginAuto0" src="@/assets/img/home/NavIcon1.png" alt="">
      </div>
      <div class="center flex flex-column flex-center">
        <input class="input textAlignCenter" type="text" placeholder="打卡赚充值金">
      </div>
      <div class="right flex flex-column flex-center">
        <img class="" src="@/assets/img/home/NavIcon2.png" alt="">
      </div>
    </div>
    <div class="list" v-show="isShow">
      <div v-for="(item,index) in list" :key="index" @click="onCityItemClick(item)">
        <div>{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "search",
  data() {
    return {
      isShow: false,
      city: "长沙",
      list: ["长沙", "武汉", "北京", "上海", "广州", "深圳",]
    }
  },
  methods: {
    onCityItemClick(item) {
      this.city = item;
      this.isShow = false;
    },
    onCityClick() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style scoped>
.search {
  margin: 0 .4rem;
  height: 1.17rem;
}

.left p {
  font-size: .37rem;
  color: #fff;
  margin-right: .11rem;
}

.left img {
  width: .29rem;
  height: .16rem;
}

.input {
  border: none;
  width: 6.53rem;
  height: .75rem;
  font-size: .37rem;
  /*background: #FFFFFF;*/
  /*opacity: 0.25;*/
  background: rgba(256, 256, 256, .8);
  color: #000;
  border-radius: 0.37rem;
  outline: none;
}

.right img {
  width: .53rem;
  height: .48rem;
}

.list {
  text-align: center;
  background-color: #F2F2F2;
  width: 2rem;
  font-size: .37rem;
  position: absolute;
}

.abs {
  position: absolute;
  width: 100%;
}

.zIndex {
  z-index: 1;
}
</style>